<!-- Datatables css-->
<link href="cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<link href="/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet" />

<!-- page content-->
<div id="users" class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>
                    Thymeleaf Index Page
                </h3>
            </div>
        </div>

        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-12 col-sm-12 ">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Users <small></small></h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle"
                                   data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">Settings 1</a>
                                    <a class="dropdown-item" href="#">Settings 2</a>
                                </div>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box table-responsive">
                                    <!--<p class="text-muted font-13 m-b-30">
                                        DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>
                                    </p>-->
                                    <button class="btn btn-primary" type="button">新增</button>
                                    <table id="datatable" class="table table-striped table-bordered" style="width:100%">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>username</th>
                                            <th>email</th>
                                            <th>password</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <<!--tr>
                                            <th>ID</th>
                                            <th>CreatDate</th>
                                            <th>username</th>
                                            <th>email</th>
                                            <th>password</th>
                                            <th>操作</th>
                                        </tr>-->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Datatables js-->
<script src="/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

<script>
    var modelsVue=new Vue({
        el:"#users",
        data:{

            //初始化分页页长、
            pageSize:5,
            //定义表格数据结构
            tableData:{
                draw:0,
                recordsTolal:0,
                recordsAiltered:0,
                data: []
            },

        },
        methods: {
            //定义表格行数据结构   ,createDate
            rowData: function (id,userName, email, password, userImage) {
                var row = {};
                row.id = id;
                // row.createDate = createDate;
                row.userName = userName;
                row.email = email;
                row.password = password;
                row.userImage = userImage;
                row.oprate = function () {
                    return (
                        "<a href='#' class='btn_editcolor' data-toggle='modal' data-target='#editModal' " +
                        "onclick='initEditModal(\"" +
                        id +
                        "\")'>编辑</a>&nbsp;" +
                        "<a href='javascript:void(0);' onclick='deleteModule(\"" +
                        id +
                        "\")' class='btn_editcolor'>删除</a>"
                    );
                };
                return row;
            },
            initTable: function () {
                // 初始化表格
                initTable: function f() {
                    var self = this;
                    $("#datatable").DataTable({
                        paging: true, //分页
                        serverSide: true, //开启后端分页
                        pagingType: "simple", //分页样式的类型simple/simple_numbers/full/full_numbers
                        pageLength: this.pageSize, //定义初始的页长
                        processing: true,
                        destroy: true, //允许销毁替换，在表格重新查询时，可以自动销毁以前的data
                        lengthChange: true, //控制是否能够调整每页的条数
                        searching: true,
                        "data-show-refresh": true,
                        ordering: true,
                        autoWidth: false,
                        ajax: function (data, callback, settings) {
                            // 从data获取查询数据
                            var columIndex = data.order[0].column;
                            var direction = data.order[0].dir;
                            var orderBy = data.columns[columIndex].name;
                            pageSize = data.length == undefined ? pageSize : data.length;

                            var searchBean = {};
                            searchBean.currentPage = data.start / pageSize + 1;
                            searchBean.pageSize = pageSize;
                            searchBean.orderBy = orderBy;
                            searchBean.direction = direction;
                            searchBean.keyword = data.search.value;

                            $.ajax({
                                url: "/api/users",
                                type: "post",
                                contentType: "application/json",
                                data: JSON.stringify(searchBean),
                                success: function (rs) {
                                    if (!rs) {
                                        layer.alert("请求出错，请稍后重试" + rs.errmsg, {icon: 2});
                                        callback(self.tableData);
                                        return;
                                    }
                                    if (rs.list == null) {
                                        $("#moduleTable tbody tr").remove();
                                        $("#loading").remove();
                                        callback(self.tableData);
                                        return;
                                    }

                                    $("#loading").remove();

                                    var rowsData = [];
                                    for (var i = 0; i < rs.list.length; i++) {
                                        //包装行数据

                                        var rowData = self.rowData(
                                            rs.list[i].id,
                                            // rs.list[i].createDate,
                                            rs.list[i].userName,
                                            rs.list[i].email,
                                            rs.list[i].password,
                                            rs.list[i].userImage
                                        );

                                        // 将行数据放到数组里
                                        rowsData.push(rowData);
                                    }
                                    self.tableData.data = rowsData;
                                    self.tableData.recordsTotal = rs.total;
                                    self.tableData.recordsFiltered = rs.total;
                                    callback(self.tableData);
                                },
                                error: function (data) {
                                    layer.alert(data.responseText, {icon: 0});
                                },
                            });
                        },
                        columns: [
                            //定义行数据字段
                            //data bean 属性 name 数据库属性
                            {data: "id", name: "id", sortable: true},
                            // {data: "creatDate", name: "creat_date", sortable: true},
                            {data: "userName", name: "user_name", sortable: true},
                            {data: "email", name: "email", sortable: true},
                            { data: "password", name: "password", sortable: true },
                            {data: "oprate", width: "80px", sortable: false},
                        ],
                    });
                }
            },
        },
        mounted:function () {
            this.initTable();
        },
    });
</script>